    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>首页</title>
    <!-- Bootstrap core CSS-->
    <link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom fonts for this template-->
    <link href="/static/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <!-- Custom styles for this template-->
    <link href="/static/css/sb-admin.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    </head>

    <body class="fixed-nav sticky-footer bg-dark" id="page-top">
    <!-- Navigation-->
     {% include 'navbar.html' %}
    <div class="content-wrapper">
    <div class="container-fluid">
      <!-- Breadcrumbs-->
      <ol class="breadcrumb">
        <li class="breadcrumb-item active">首页</li>
      </ol>
      <!-- Icon Cards-->
       <div class="row">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<div class="row">

  <!-- ☀️ 晴天 -->
  <div class="col-xl-3 col-sm-6 mb-4">
    <div class="card text-white h-100 weather-card"
         data-bs-toggle="modal" data-bs-target="#weatherModal" data-weather="晴"
         style="background: linear-gradient(135deg, #56CCF2, #2F80ED); border: none; cursor: pointer;">
      <div class="card-body text-center">
        <div class="mb-2">
          <i class="fas fa-sun fa-2x"></i>
        </div>
        <div class="fs-2 fw-bold">{{ sunny }}</div>
        <div class="fs-6 mt-1">晴天的城市数量</div>
      </div>
    </div>
  </div>

  <!-- ☁️ 阴天 -->
  <div class="col-xl-3 col-sm-6 mb-4">
    <div class="card text-white h-100 weather-card"
         data-bs-toggle="modal" data-bs-target="#weatherModal" data-weather="阴"
         style="background: linear-gradient(135deg, #bdc3c7, #2c3e50); border: none; cursor: pointer;">
      <div class="card-body text-center">
        <div class="mb-2">
          <i class="fas fa-cloud fa-2x"></i>
        </div>
        <div class="fs-2 fw-bold">{{ cloudy }}</div>
        <div class="fs-6 mt-1">阴天的城市数量</div>
      </div>
    </div>
  </div>

  <!-- 🌧️ 雨天 -->
  <div class="col-xl-3 col-sm-6 mb-4">
    <div class="card text-white h-100 weather-card"
         data-bs-toggle="modal" data-bs-target="#weatherModal" data-weather="雨"
         style="background: linear-gradient(135deg, #00c6ff, #0072ff); border: none; cursor: pointer;">
      <div class="card-body text-center">
        <div class="mb-2">
          <i class="fas fa-cloud-showers-heavy fa-2x"></i>
        </div>
        <div class="fs-2 fw-bold">{{ rainy }}</div>
        <div class="fs-6 mt-1">雨天的城市数量</div>
      </div>
    </div>
  </div>

  <!-- ❄️ 雪天 -->
  <div class="col-xl-3 col-sm-6 mb-4">
    <div class="card text-white h-100 weather-card"
         data-bs-toggle="modal" data-bs-target="#weatherModal" data-weather="雪"
         style="background: linear-gradient(135deg, #83a4d4, #b6fbff); border: none; cursor: pointer;">
      <div class="card-body text-center">
        <div class="mb-2">
          <i class="fas fa-snowflake fa-2x"></i>
        </div>
        <div class="fs-2 fw-bold">{{ snowy }}</div>
        <div class="fs-6 mt-1">雪天的城市数量</div>
      </div>
    </div>
  </div>

</div>

        </div>

      <!-- <div class="row">
        <div class="col-xl-3 col-sm-6 mb-3">
          <div class="card text-white bg-primary o-hidden h-100">
            <div class="card-body">
              <div class="mr-5">{{ sunny }}</div>
            </div>
            <a class="card-footer text-white clearfix small z-1" href="#">
              <span class="float-left">晴天的城市数量</span>
            </a>
          </div>
        </div>
        <div class="col-xl-3 col-sm-6 mb-3">
          <div class="card text-white bg-warning o-hidden h-100">
            <div class="card-body">
              <div class="mr-5">{{cloudy}}</div>
            </div>
            <a class="card-footer text-white clearfix small z-1" href="#">
              <span class="float-left">阴天的城市数量</span>
            </a>
          </div>
        </div>
        <div class="col-xl-3 col-sm-6 mb-3">
          <div class="card text-white bg-success o-hidden h-100">
            <div class="card-body">
              <div class="mr-5">{{ rainy }}</div>
            </div>
            <a class="card-footer text-white clearfix small z-1" href="#">
              <span class="float-left">雨天的城市数量</span>
            </a>
          </div>
        </div>
        <div class="col-xl-3 col-sm-6 mb-3">
          <div class="card text-white bg-danger o-hidden h-100">
            <div class="card-body">
              <div class="mr-5">{{ snowy }}</div>
            </div>
            <a class="card-footer text-white clearfix small z-1" href="#">
              <span class="float-left">雪天的城市数量</span>
            </a>
          </div>
        </div>
      </div> -->
      <!-- Area Chart Examples-->
    <!-- 条形图 -->
    <div class="col-lg-12"> <!-- 添加 text-center 类 -->
      <div class="card mb-3">
        <div class="card-header">
          <i class="fa fa-bar-chart"></i> 最高温度的十个城市
        </div>
        <div class="card-body">
          <div id="highestTemperatureChart" style="width: 100%; height: 400px;"></div>
        </div>
      </div>
    </div>
    <!-- 折线图 -->
    <div class="col-lg-12"> <!-- 添加 text-center 类 -->
      <div class="card mb-3">
        <div class="card-header">
          <i class="fa fa-line-chart"></i> 温度最低的十个城市
        </div>
        <div class="card-body">
          <div id="lowestTemperatureChart" style="width: 100%; height: 400px;"></div>
        </div>
      </div>
    </div>

    <!-- 饼图环形图 -->
    <!-- 添加 justify-content-center 类 -->
    <div class="row justify-content-center"> 
  
      <div class="col-lg-6"> <!-- 移除 text-center 类 -->
        <div class="card mb-3">
          <div class="card-header">
            <i class="fa fa-pie-chart"></i> 风速最大的十个城市
          </div>
          <div class="card-body text-center"> <!-- 添加 text-center 类 -->
            <div id="pieChart" style="width: 100%; height: 400px;"></div>
          </div>
        </div>
      </div>
      <!-- 环形图 -->
      <div class="col-lg-6"> <!-- 移除 text-center 类 -->
        <div class="card mb-3">
          <div class="card-header">
            <i class="fa fa-pie-chart"></i> 湿度最大的十个城市
          </div>
          <div class="card-body text-center"> <!-- 添加 text-center 类 -->
            <div id="ringChart" style="width: 100%; height: 400px;"></div>
          </div>
        </div>
      </div>
    </div>


    </div>
    <!-- /.container-fluid -->
    </div>
    <!-- /.content-wrapper -->
    <footer class="sticky-footer">
    <div class="container">
      <div class="text-center">
        <small>flask+mysql天气数据分析系统</small>
      </div>
    </div>
    </footer>
    <!-- Scroll to Top Button-->
    <a class="scroll-to-top rounded" href="#page-top">
    <i class="fa fa-angle-up"></i>
    </a>
    <!-- Logout Modal-->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel"></h5>
          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">真的要退出系统了吗？</div>
        <div class="modal-footer">
          <button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
          <a class="btn btn-primary" href="/loginOut">确定</a>
        </div>
      </div>
    </div>
    </div>
    <!-- 通用天气模态框 -->
    <div class="modal fade" id="weatherModal" tabindex="-1" aria-labelledby="weatherModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-lg">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="weatherModalLabel">天气城市列表</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
        </div>
        <div class="modal-body">
            <ul id="weatherCityList" class="list-group"></ul>
        </div>
        </div>
    </div>
    </div>




    <!-- Bootstrap core JavaScript-->
    <script src="/static/vendor/jquery/jquery.min.js"></script>
    <script src="/static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- Core plugin JavaScript-->
    <script src="/static/vendor/jquery-easing/jquery.easing.min.js"></script>
    <!-- Custom scripts for all pages-->
    <script src="/static/js/sb-admin.min.js"></script>
    <!-- Charts-->
    <script src="/static/vendor/echarts/echarts.min.js"></script>
<script>
    // 初始化 ECharts 实例
    var myChart = echarts.init(document.getElementById('highestTemperatureChart'));

    // 获取从路由返回的数据
    var highestTemperatures = JSON.parse('{{ highest_temperatures | tojson | safe}}');

    // 提取城市名称和温度数据
    var cities = [];
    var temperatures = [];
    for (var i = 0; i < highestTemperatures.length; i++) {
        cities.push(highestTemperatures[i][0]);
        temperatures.push(highestTemperatures[i][1]);
    }

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '最高温度趋势',
            left: 'center',
            textStyle: {
                color: '#555'
            }
        },
        tooltip: {
            trigger: 'axis',
            formatter: '{b}<br/>{a}: {c}°C'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '15%',  // 为x轴标签留更多空间
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: cities,
            axisLabel: {
                rotate: 45,
                interval: 0,
                color: '#666',
                margin: 15  // 增加标签与轴线的距离
            },
            axisLine: {
                lineStyle: {
                    color: '#ccc'
                }
            },
            axisTick: {
                alignWithLabel: true
            }
        },
        yAxis: {
            type: 'value',
            name: '温度(°C)',
            nameTextStyle: {
                color: '#666'
            },
            axisLine: {
                lineStyle: {
                    color: '#ccc'
                }
            },
            axisLabel: {
                color: '#666'
            },
            splitLine: {
                lineStyle: {
                    color: '#f0f0f0'
                }
            }
        },
        series: [{
            name: '温度',
            type: 'line',
            data: temperatures,
            symbol: 'circle',  // 数据点显示为圆形
            symbolSize: 8,     // 数据点大小
            itemStyle: {
                color: '#d9534f'  // 使用莫代尔蓝绿色
            },
            lineStyle: {
                width: 3,
                color: '#d9534f'
            },
            label: {
                show: true,
                position: 'top',
                color: '#555',
                formatter: '{c}°C'
            },
            emphasis: {
                itemStyle: {
                    color: '#d9534f',  // 高亮时使用莫代尔橙红色
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: true
                }
            }
        }]
    };

    // 使用刚指定的配置项和数据显示图表
    myChart.setOption(option);
    
    // 响应式调整
    window.addEventListener('resize', function() {
        myChart.resize();
    });
</script>
<script>
    var lowestTemperatures = JSON.parse('{{ lowest_temperatures | tojson | safe}}');

    var cities = [];
    var temperatures = [];
    for (var i = 0; i < lowestTemperatures.length; i++) {
        cities.push(lowestTemperatures[i][0]);
        temperatures.push(lowestTemperatures[i][1]);
    }

    var lowestTemperatureChart = echarts.init(document.getElementById('lowestTemperatureChart'));

    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line'
            }
        },
        xAxis: {
            type: 'category',
            data: cities,
            axisLabel: {
                rotate: 45,
                interval: 0
            }
        },
        yAxis: {
            type: 'value'
        },
        // series: [{
        //     name: '温度',
        //     type: 'line',
        //     data: temperatures,
        //     itemStyle: {
        //         color: '#d9534f' // 折线图颜色
        //     }
        // }]
        series: [{
            name: '温度',
            type: 'line',
            data: temperatures,
            symbol: 'circle',  // 数据点显示为圆形
            symbolSize: 8,     // 数据点大小
            itemStyle: {
                color: '#66C2A5'  // 使用莫代尔蓝绿色
            },
            lineStyle: {
                width: 3,
                color: '#66C2A5'
            },
            label: {
                show: true,
                position: 'top',
                color: '#555',
                formatter: '{c}°C'
            },
            emphasis: {
                itemStyle: {
                    color: '#66C2A5',  // 高亮时使用莫代尔橙红色
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: true
                }
            }
        }]
    };

    lowestTemperatureChart.setOption(option);
</script>
<script>
    // 使用从后端路由获取的数据设置柱状图
    var barData = JSON.parse('{{ highest_wind | tojson | safe }}');
    var barChart = echarts.init(document.getElementById('pieChart')); // 注意：这里仍然使用pieChart作为元素ID
    
    // 柱状图配置选项
    var barOption = {
        title: {
            text: '风力数据',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: '{b} : {c}'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: barData.map(function(item) {
                return item[0];
            }),
            axisLabel: {
                rotate: 30, // 如果标签文字较长可以旋转
                interval: 0 // 强制显示所有标签
            }
        },
        yAxis: {
            type: 'value',
            name: '风力值',
            axisLine: {
                show: true
            },
            axisLabel: {
                formatter: '{value}'
            }
        },
        series: [{
            name: '风力',
            type: 'bar',
            data: barData.map(function(item) {
                return {
                    name: item[0],
                    value: item[1]
                };
            }),
            itemStyle: {
                color: function(params) {
                    // 自定义颜色，可以根据需要修改
                    var colorList = ['#8DA0CB','#66C2A5', '#FC8D62',  '#E78AC3',   '#A6D854'   ];
                    return colorList[params.dataIndex % colorList.length];
                },
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            label: {
                show: true,
                position: 'top'
            }
        }]
    };
    
    barChart.setOption(barOption);
    
    // 响应式调整
    window.addEventListener('resize', function() {
        barChart.resize();
    });
</script>
<script>
    // 使用从后端路由获取的湿度数据设置柱状图
    var barData = JSON.parse('{{ highest_humidity | tojson | safe }}');
    var barChart = echarts.init(document.getElementById('ringChart')); // 仍然使用ringChart作为元素ID
    
    // 柱状图配置选项
    var barOption = {
        title: {
            text: '湿度数据',
            left: 'center',
            textStyle: {
                color: '#555'  // 使用深灰色标题
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: '{b} : {c}%'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: barData.map(function(item) {
                return item[0];
            }),
            axisLabel: {
                rotate: 30,  // 如果标签文字较长可以旋转
                interval: 0,  // 强制显示所有标签
                color: '#666'  // 轴标签颜色
            },
            axisLine: {
                lineStyle: {
                    color: '#ccc'  // 轴线颜色
                }
            }
        },
        yAxis: {
            type: 'value',
            name: '湿度(%)',
            nameTextStyle: {
                color: '#666'
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#ccc'
                }
            },
            axisLabel: {
                formatter: '{value}%',
                color: '#666'
            },
            splitLine: {
                lineStyle: {
                    color: '#f0f0f0'  // 网格线颜色
                }
            }
        },
        series: [{
            name: '湿度',
            type: 'bar',
            barWidth: '60%',  // 柱条宽度
            data: barData.map(function(item) {
                return {
                    name: item[0],
                    value: item[1]
                };
            }),
            itemStyle: {
                color: function(params) {
                    // 莫代尔配色方案
                    var mutedColors = [
                        '#8DA0CB',  // 柔和的蓝紫色
                        '#66C2A5',  // 柔和的蓝绿色
                        '#FC8D62',  // 柔和的橙红色
                        '#E78AC3',  // 柔和的粉红色
                        '#A6D854'   // 柔和的黄绿色
                    ];
                    return mutedColors[params.dataIndex % mutedColors.length];
                },
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.3)'
                }
            },
            label: {
                show: true,
                position: 'top',
                formatter: '{c}%',
                color: '#555',  // 标签文字颜色
                fontSize: 12
            }
        }]
    };
    
    barChart.setOption(barOption);
    
    // 响应式调整
    window.addEventListener('resize', function() {
        barChart.resize();
    });
</script>

<script>
document.querySelectorAll('.weather-card').forEach(card => {
  card.addEventListener('click', function () {
    const weather = this.getAttribute('data-weather');
    fetch(`/weather_cities/${weather}`)
      .then(response => response.json())
      .then(data => {
        const list = document.getElementById('weatherCityList');
        const title = document.getElementById('weatherModalLabel');
        title.textContent = weather + "城市列表";
        list.innerHTML = '';

        if (data.cities && data.cities.length > 0) {
          data.cities.forEach(city => {
            const li = document.createElement('li');
            li.className = 'list-group-item';
            li.textContent = city;
            list.appendChild(li);
          });
        } else {
          list.innerHTML = '<li class="list-group-item text-muted">无数据</li>';
        }
      })
      .catch(err => {
        console.error("请求失败：", err);
      });
  });
});
</script>



    </body>
    </html>
